import React, { useState, useEffect } from 'react';  
import { Layout,Row, Col  } from 'antd';  
import { useTranslation } from 'react-i18next'; // 假设你使用 react-i18next 进行国际化  
import { Link, useLocation } from 'react-router-dom'; // 引入 React Router 的 Link  
import './index.less'
const { Header: AntHeader, Content } = Layout;  
  
const Home = () => {  
  const [hover, setHover] = useState(false);  
  const [title, setTitle] = useState(''); // 假设 title 是从父组件传递的 prop  
  const [items, setItems] = useState([]); // 假设这是从某个地方获取的数据  
  const { t } = useTranslation(); // 国际化  
  const [hoveredIndex, setHoveredIndex] = useState(null);  
  
  // 处理鼠标悬停事件  
  const handleMouseEnter = (index) => {  
    setHoveredIndex(index);  
  };  
  
  // 处理鼠标离开事件  
  const handleMouseLeave = () => {  
    setHoveredIndex(null);  
  };  

  useEffect(() => {  
    // 模拟从某处获取数据  
    // 例如: axios.get('/api/items').then(response => setItems(response.data));  
    setItems([  
      // 示例数据  
      // { id: 1, title: '原料系统', link: 'http://172.16.8.23:8001/login?redirect=%2Fraw%2FrawList' },  
      { id: 2, title: '药监局', link: 'https://www.nmpa.gov.cn/hzhp/index.html' },  
      { id: 3, title: '食品伙伴网', link: 'http://www.foodmate.net/' },
      { id: 4, title: 'CIR', link: 'https://www.cir-safety.org/ingredients' },  
      { id: 5, title: 'SCCS', link: 'https://ec.europa.eu/growth/tools-databases/cosing/' },  
      { id: 6, title: 'ECHA', link: 'https://echa.europa.eu/' },
      { id: 7, title: 'PUBCHEM', link: 'https://pubchem.ncbi.nlm.nih.gov/'},  
      { id: 8, title: 'PUBMED', link: 'https://pubmed.ncbi.nlm.nih.gov/'}, 
      { id: 9, title: 'PCPC', link: 'https://incipedia.personalcarecouncil.org/infobase/ingredient-custom-search/'}, 
      { id: 10, title: 'AICIS', link: 'https://services.industrialchemicals.gov.au/search-assessments/'},
      { id: 11, title: 'JECFA', link: 'https://apps.who.int/food-additives-contaminants-jecfa-database/'},
      { id: 12, title: 'FDA - 21CFR', link: 'https://www.accessdata.fda.gov/scripts/cdrh/cfdocs/cfcfr/cfrsearch.cfm'},
      { id: 13, title: 'RIFM', link: 'https://rifmdatabase.rifm.org/rifmweb/home/home-page'},
      // ... 其他项目  
    ]);  
  }, []); // 空依赖数组表示这个 effect 只在组件挂载时运行  
  
 
  
  return (  
    <div className="ve_home">  
      <AntHeader className="banner">  
        <h2>{t('化妆品安全评估系统')}</h2>  
      </AntHeader>  
      
      <div style={{marginTop:'5%'}} className="box-list-container">  
        {items.map((item, index) => (  
          <div  
            key={item.id}  
            className={`box ${hoveredIndex === index ? 'box-hovered' : ''}`}  
            onMouseEnter={() => handleMouseEnter(index)}  
            onMouseLeave={handleMouseLeave}  
          >  
            <a href={item.link} target="_blank" className="box-link">  
              <span>{item.title}</span>  
            </a>  
          </div>  
        ))}  
      </div>  
    </div>  
  );  
};  
  
export default Home;